 <% 
    var headContent = {
  %>
 <style>

/*验证：提示信息样式 begin*/
 .am-alert-danger {
    background-color: transparent;
    border-color: transparent;
    color: red;
	        }
  .am-alert {
    margin-bottom: 1em;
    padding: .625em;
    background: transparent;
    border: none;
    border-radius: 0;
	      }
  /*验证：提示信息样式 end*/
 </style>
 <%
};
%>
<%layout("/common/_layout.html",{head:headContent}){%>
<form id="accountForm" name="accountForm" method="POST" class="am-form"">
<input type="hidden" id="id" name="id" value="${SysUser.id}" /> 
  <!--选项卡（tabs）begin-->
  <div class="am-tabs am-margin" data-am-tabs>
    <ul class="am-tabs-nav am-nav am-nav-tabs">
      <li class="am-active"><a href="#tab1">修改密码</a></li>      
    </ul>
    <div class="am-tabs-bd">
      <div class="am-tab-panel am-fade am-in am-active" id="tab1">
      <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">账号名：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
              <input type="text" value="${SysUser.user_name!}" readonly />
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
          </div>
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">原密码：<span  style="color: red;">*</span>
            </div>
            <div class="am-u-sm-6 am-u-md-6">
              <input class="am-input-sm js-pattern-password" data-validation-message="请输入原密码" type="password" name="password" id="password" placeholder="请输入原密码" required/>
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg">
            <div class="am-alert am-alert-danger">${passwordMessages!}</div>
            </div>
          </div>
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">新密码：<span  style="color: red;">*</span>
            </div>
            <div class="am-u-sm-6 am-u-md-6">
              <input class="am-input-sm js-pattern-newPassword"  data-validation-message="请输入新密码(8-20位非中文字符)" type="password" id="newPassword" name="newPassword" placeholder="请输入新密码(8-20位非中文字符)" required/>
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg">
             <div class="am-alert am-alert-danger">${newPasswordMessages!}</div></div>
          </div>
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">确认密码：<span  style="color: red;">*</span>
            </div>
            <div class="am-u-sm-6 am-u-md-6">
             
              <input class="am-input-sm js-pattern-newPasswordConfirm"  data-validation-message="请输入确认密码" type="password" id="newPasswordConfirm" name="newPasswordConfirm" placeholder="请输入确认密码" required/>
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg">
             <div class="am-alert am-alert-danger">${newPasswordConfirmMessages!}</div></div>
          </div>
      </div>
      </div>
  </div>
  <!--选项卡（tabs）end-->
  <div class="am-margin">
    <button type="button"  id="save" name="save" class="am-btn am-btn-primary am-btn-xs">提交保存</button>
  </div>
</form>
<script type="text/javascript" src="${base}/template/common/js/rsa/jsencrypt.min.js"></script>
<script type="text/javascript">
$(function(){
   
	 /*表单验证：begin*/
    //自定义规则，用法：验证元素上加class="js-pattern-sort"
    if ($.AMUI && $.AMUI.validator) {
    	$.AMUI.validator.patterns.newPassword = /^[\@A-Za-z0-9\!\#\$\%\^\&\*\.\~]{8,20}$/;
    }
    var $myField = null;
    var myMsg = "";
    $("#accountForm").validator({
    
    	//自定义验证
        validate: function(validity) {
          var $field = $(validity.field);
          var v = $field.val();
            if($field.is('#newPasswordConfirm')) {
              if(v && (v != $('#newPassword').val())){
                $myField = $field;
                myMsg = "两次密码输入不一致"
 
                validity.valid = false;
              }
            }
     },
      // 域通过验证时回调
      onValid: function(validity) {
    	  var $field = $(validity.field);
        $(validity.field).closest('.am-form-group').find('.am-alert').hide();
      },
      // 验证出错时的回调， validity 对象包含相关信息，格式通 H5 表单元素的 validity 属性
      onInValid: function(validity) {
          
        var $field = $(validity.field);
        var $group = $field.closest('.am-form-group');
        var $alert = $group.find('.am-alert');
        // 使用自定义的提示信息 或 插件内置的提示信息
        console.log("accountForm fail="+$field.attr.name);
        var msg = $field.data('validationMessage') || this.getValidationMessage(validity);
        if($myField && myMsg && $field.val() && $field.is($myField)){
            msg = myMsg;
            $myField = null;
            myMsg = "";
          }else{
            // 使用自定义的提示信息 或 插件内置的提示信息
            msg = $field.data('validationMessage') || this.getValidationMessage(validity);
        }
       
        if (!$alert.length) {
          $alert = $("<div class='am-alert am-alert-danger'></div>").hide().
          appendTo($group.find(".input-msg"));
        }

        $alert.html(msg).show();
      }
    });
    
    
    /*表单验证：end*/

    $('#save').click(function() {
    var id = $("#id").val();
    var pwd = $("#password").val();
    var newPwd = $("#newPassword").val();
	
	var encrypt = new JSEncrypt();
	encrypt.setPublicKey("${publickey}");
	var encryptedPwd = encrypt.encrypt(pwd);
	var encryptedNewPwd = encrypt.encrypt(newPwd);
    $.ajax({    
         type:'post',    
         url:"${base}/account/updatePassword",    
         data:{
           "id":id,
           "password":encryptedPwd,
           "newPassword":encryptedNewPwd
         },    
         cache:false,    
         dataType:'json',    
         success:function(data){
         	//alert(data.status+":"+data.message);
         	if("success" == data.status){
	         	layer.alert(data.message,function(index){
	                layer.close(index);
	                window.location.href="${base}/admin/logout"; 
	            });
         	}else{
         		layer.alert(data.message,function(index){
	                layer.close(index);
	            });
         	}
         },    
         error:function(){
            layer.msg("密码修改失败，请联系管理员");
      }    
    });
   });
});
</script>
<%}%>